<script></script>

<template>
  <div class="basic" :class="{ active: isView === 1 }">
    <div>
      <span class="font-semibold">项目名称：</span>
      <span>新员工培训</span>
    </div>
    <div>
      <span class="font-semibold">所属部门：</span>
      <span>研发部</span>
    </div>
    <div class="flex">
      <span class="font-semibold">目标人群：</span>
      <a-tooltip placement="topLeft">
          <template #title>
            人事部、销售部、产品参加三毛流浪啦啦啦啦啦啦点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的
          </template>
          <div class="view-detail">人事部、销售部、产品参加三毛流浪啦啦啦啦啦啦点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的点点滴滴的</div>
        </a-tooltip>
    </div>
    <div class="flex">
      <span class="font-semibold">项目简介：</span>
      <div class="view-detail">
        我们致力于推动在线教育的发展，在2014年-2016年推动了在线教育整体30%的发展速度。技术创新不断降低在线教育技啦啦啦啦啦
      </div>
      <div class="hand_blue" @click="handleDetail" v-if="!isView">查看详情</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isView: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isDetail: false,
    };
  },
  methods: {
    handleDetail() {
      this.isDetail = true;
      // this.$router.push()
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.basic {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e6eb;
  padding: 24px;
  &.active {
    background: rgba(242, 250, 255, 0.2);
    border: 1px solid rgba(0, 147, 255, 0.1) !important;
    border-radius: 4px;
  }

  .view-detail {
    display: inline-block;
    width: 683px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .view-detail-active {
    width: 683px;
  }
}

.basic > div {
  margin-bottom: 24px;
}

.basic > div:last-child {
  margin-bottom: 0;
}
.hand_blue {
  color: #0093ff;
  cursor: pointer;
}

.font-semibold {
  font-weight: 600;
}
</style>
